<script setup lang="ts">
interface endValue {
  startTime: string
  endTime: string
}

interface endDateValue {
  startDate: Date
  endDate: Date
}

let startChange = (val: string) => {
  console.log('startChange:' + val)
}
let endChange = (val: endValue) => {
  console.log('endChange:' + val.startTime, val.endTime)
}

let dateStartChange = (val: Date) => {
  console.log('dateStartChange:' + val)
}
let dateEndChange = (val: endDateValue) => {
  console.log('dateEndChange:' + val.startDate, val.endDate)
}

let startOptions = {
  size: 'default',
  clearable: true
}
let endOptions = {
  size: 'default',
  clearable: false
}
</script>

<template>
  <m-choose-time
    @startChange="startChange"
    @endChange="endChange"
    :startOptions="startOptions"
    :endOptions="endOptions"
  ></m-choose-time>
  <br />
  <m-choose-date
    @startChange="dateStartChange"
    @endChange="dateEndChange"
    :disabledBeforeToday="true"
    :startOptions="startOptions"
    :endOptions="endOptions"
  ></m-choose-date>
</template>

<style lang="scss" scoped></style>
